<template>
	<view>
		<view class="box">
			<view class="container">
				<view v-if="isLogin" class="user-info">
					<view class="user-avatar-box">
						<WxAvatar ref="WxAvatar" widthd="250rpx" heightd="250rpx"></WxAvatar>
					</view>
					<WxNickname ref="WxNickname" selectedIndex=2></WxNickname>
					<CustomTabBar ref="CustomTabBar"></CustomTabBar>
				</view>
				<view v-else>
					<button class="wx-login" @click="login">微信一键登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import userApi from '../../api/user'

	export default {
		name: 'My',
		data() {
			return {
				
			}
		},
		computed: {
			...mapState(['isLogin'])
		},
		methods: {
			...mapMutations(['changeLogin']),
			login() { //登录用户
				uni.showLoading({
					mask: true,
					title: '正在登录'
				})
				userApi.login((res) => {
					this.changeLogin(true)
					uni.showToast({
						position: 'center',
						title: '登录成功',
						duration: 1500
					})
				}, (res) => {
					this.changeLogin(false)
					uni.showToast({
						icon: 'error',
						position: 'center',
						title: '登录失败：' + res.statusCode,
						duration: 1500
					})
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100vw;
		height: 100vh;
		/* 背景渐变 */
		/* background: linear-gradient(to bottom right, #feb47b, #fea55c, #fe9142, #fe8433); */
		/* 高斯模糊 */
		/* backdrop-filter: blur(10px); */
		/* 兼容性前缀 */
		/* -webkit-backdrop-filter: blur(10px); */
	}

	.container {
		width: 100vw;
		height: 100vh;
		display: flex; /* flex 布局 */
		flex-direction: column; /* 垂直排列 */
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
		text-align: center;  /* 文本输入框居中 */
	}

	.user-info {
		width: 100vw;
		height: 100vh;
		display: flex; /* flex 布局 */
		flex-direction: column; /* 垂直排列 */
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
		text-align: center;  /* 文本输入框居中 */
	}

	.user-avatar-box {
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		box-shadow: 0 0rpx 8rpx rgba(0, 0, 0, 0.3);
		margin: 10rpx;
		padding: 10rpx;
		background-color: rgba(255, 255, 255, 0.1);
		border: 1px solid white;
		display: flex; /* flex 布局 */
		flex-direction: column; /* 垂直排列 */
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
		text-align: center;  /* 文本输入框居中 */
	}
	.wx-login {
		width: 70vw;
		height: 90rpx;
		text-align: center;
		color: white;
		background: linear-gradient(to right, #00ff00, #008100); /* 从左到右的绿色渐变 */
	}
</style>